<template>
  <el-popover
    :placement="placement"
    :title="title"
    :width="width"
    :trigger="trigger"
    :content="text">
    <div class="textShow" :style="textStyle" slot="reference">{{text}}</div>
  </el-popover>
</template>

<script>
export default {
  name: 'index',
  props: {
    text: { type: String, default: '-' },
    title: { type: String, default: '' },
    width: { type: String, default: '200' },
    trigger: { type: String, default: 'hover' },
    placement: { type: String, default: 'top-start' },
    textStyle: { type: String, default: 'width: 150px' }
  }
}
</script>

<style scoped>
 .textShow{
   white-space: nowrap;
   text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
   overflow: hidden;
 }
</style>
